<template>
  <div>
    <h2>这是一个页面</h2>
    <div id="components-table-demo-size">
      <a-table
        :columns="columns"
        :data-source="data"
        size="small"
        :pagination="false"
        :rowKey="record => record.limitid"
      >
        <span slot="customTitle">
          <a-checkbox @change="onChangeRedeAll" v-model="checkedAll">读</a-checkbox>
        </span>
        <span slot="operationTitle">
          <a-checkbox @change="onChangeWriteAll">写</a-checkbox>
        </span>

        <span slot="action" slot-scope="text, record">
          <a-checkbox v-model="record.checked" @change="onChangeRede(record)">读</a-checkbox>
        </span>
        <span slot="operation" slot-scope="text, record">
          <a-checkbox @change="onChangeWrite(text, record)">写</a-checkbox>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedAll: false,
      columns: [
        {
          title: "Name",
          dataIndex: "limitname"
        },
        {
          key: "action",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "action" }
        },
        {
          slots: { title: "operationTitle" },
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      data: [
        {
          limitid: "51F7CEFB-3FE7-4108-B175-0FB312B77FF9",
          limitname: "行政区域管理",
          readorwrite: 2,
          children: [
            {
              limitid: "9A44CFF4-EC7E-46F1-8557-F026E29A140C",
              limitname: "用户管理",
              readorwrite: 2
            },
            {
              limitid: "14846AE9-1DD2-4B11-A521-ABCADB34CDA5",
              limitname: "角色管理",
              readorwrite: 2
            },
            {
              limitid: "3B43CA97-A91B-495F-88CA-399FDA171213",
              limitname: "一企一档",
              readorwrite: 2
            }
          ]
        },

        {
          limitid: "852D5877-2CCA-4E13-B8EC-C9AE54E673F8",
          limitname: "信访投诉建议",
          readorwrite: 2,
          children: [
            {
              limitid: "678D5877-2CCA-4E13-B8EC-C9AE54E685H0",
              limitname: "精细化管理",
              readorwrite: 2
            },
            {
              limitid: "639B4105-9D7E-4729-918A-C60E58D239DA",
              limitname: "专家管理",
              readorwrite: 2
            },
            {
              limitid: "D3E165AD-EEA1-48AA-AACE-B3389138A23F",
              limitname: "专家服务",
              readorwrite: 2
            },
            {
              limitid: "985D2A0B-251F-4E6F-806C-7E1558CD50E4",
              limitname: "培训服务",
              readorwrite: 2
            },
            {
              limitid: "790EA276-CBA5-41A9-80BD-563A25399965",
              limitname: "培训管理",
              readorwrite: 2
            },
            {
              limitid: "9E26A173-FA15-47EF-861C-B59B60EF6C91",
              limitname: "重点涉气企业设置",
              readorwrite: 2
            }
          ]
        },

        {
          limitid: "8826A173-FA15-47EF-861C-B59B60EF6C91",
          limitname: "巡查任务管理",
          readorwrite: 2
        },
        {
          limitid: "1111A173-FA15-47EF-861C-B59B60EF6C91",
          limitname: "巡查任务查询",
          readorwrite: 2
        },
        {
          limitid: "852D5877-2CCA-4E13-B8EC-C9AE54E671D6",
          limitname: "巡查管理",
          readorwrite: 2
        },
        {
          limitid: "125D5877-2CCA-4E13-B8EC-C9AE54E671D6",
          limitname: "企业巡查信息",
          readorwrite: 2
        },
        {
          limitid: "091F21A6-4689-483D-B922-1D963901BA70",
          limitname: "临时交办",
          readorwrite: 2
        },
        {
          limitid: "E3118F0A-ECB5-422A-B7D9-71E7BB168B5A",
          limitname: "环评备案",
          readorwrite: 2,
          children: [
            {
              limitid: "F4218F0A-ECB5-422A-B7D9-71E7BB168B5A",
              limitname: "环评复核管理",
              readorwrite: 2
            },
            {
              limitid: "852D5877-2CCA-4E13-B8EC-C9AE54E695H0",
              limitname: "环保头条管理",
              readorwrite: 2
            },
            {
              limitid: "852D5877-2CCA-4E13-B8EC-C9AE54E796H0",
              limitname: "公告信息管理",
              readorwrite: 2
            },
            {
              limitid: "125D5877-2CCA-4E13-B8EC-C9AE54E793F8",
              limitname: "法律法规管理",
              readorwrite: 2
            },
            {
              limitid: "1234560B-251F-4E6F-806C-7E1558BC49E3",
              limitname: "总结报告",
              readorwrite: 2
            },
            {
              limitid: "96EF9177-2C7A-4680-88CD-48F7190Cd9g5",
              limitname: "检查上报",
              readorwrite: 2
            },
            {
              limitid: "29F51AD9-B3D0-4C3D-87B3-A78071E07C1C",
              limitname: "应急管理",
              readorwrite: 2
            },
            {
              limitid: "29F51AD9-B3D0-4C3D-87B3-A78071E07D2D",
              limitname: "应急演练",
              readorwrite: 2
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.data.forEach(item => {
      this.$set(item, "checked", false);
      if (item.children) {
        item.children.forEach(citem => {
          this.$set(citem, "checked", false);
        });
      }
    });
    console.log(this.data);
  },
  methods: {
    onChangeRedeAll() {
      this.data.forEach(item => {
        item.checked = this.checkedAll;
        if (item.children) {
          item.children.forEach(citem => {
            citem.checked = this.checkedAll;
          });
        }
      });
      console.log(this.checkedAll);
    },
    onChangeWriteAll(e) {
      console.log("写", e);
    },
    onChangeRede(val) {
      var check = [];
      if (val.children) {
        val.children.forEach(item => {
          item.checked = val.checked;
        });
      }
      this.data.forEach(items => {
        if (items.children) {
          var bool = items.children.every(citem => citem.checked);
          if (bool) {
            check.push(items);
            items.checked = true;
          } else {
            items.checked = false;
          }
          
        }
      });
      if (check.indexOf(false) == -1) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
       console.log(check)
    },
    onChangeWrite(text, record) {
      console.log("写01", text, record);
    }
  }
};
</script>

<style scoped>
</style>